<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {

            var $menu = $('.menu');
            var $banner = $('.banner');
            var $menu_back = $('.menu_back');
            var $totop = $('.totop');

            $(window).scroll(function () {
                var iNum = $(document).scrollTop();
                /* document.title = iNum; */
                if (iNum > 200) {
                    $menu.css({
                        'position': 'fixed',
                        'left': "50%",
                        'top': 0,
                        'margin-left': -480,
                    })
                    $menu_back.show();
                } else {
                    $menu.css({
                        'position': 'static',
                        'margin-left': "auto",
                    })
                    $menu_back.hide();
                }
                if (iNum > 400) {
                    $totop.fadeIn();
                } else {
                    $totop.fadeOut();
                }
            });

            $totop.click(function () {
                $('html, body').animate({
                    'scrollTop': 0,
                })
            });




        });
    </script>
    <style type="text/css">
        body {
            margin: 0px;

        }

        .banner {
            width: 960px;
            height: 200px;
            background-color: cyan;
            margin: 0 auto;

        }

        .menu {
            width: 960px;
            height: 80px;
            background-color: gold;
            margin: 0 auto;
            text-align: center;
            line-height: 80px;
            /* opacity: 0.3; */
        }

        .menu_back {
            width: 960px;
            height: 80px;
            margin: 0 auto;
            text-align: center;
            display: none;
        }

        p {
            text-align: center;
            color: red;
        }

        .totop {
            width: 60px;
            height: 60px;
            background-color: #000;
            color: #ffffff;
            position: fixed;
            right: 20px;
            bottom: 50px;
            line-height: 60px;
            text-align: center;
            font-size: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: none;

        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="banner">banner</div>
    <div class="menu">菜单</div>
    <div class="menu_back"></div>
    <div class="totop">↑</div>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
    <p>文档内容</p>
    <br>
    <br>
    <br>
    <br>
</body>

</html>